<template>
  <SModal
      v-model:show="modalShow"
      :title="modalTitle" @positive-click="onSubmit"
  >
    <SForm
        ref="formRef"
        :model="formValue"
    >
      <n-gi :span="12">
        <SFormInput name="name" label="歌手名字" required v-model:value="formValue.name" @load-rules="loadRules"/>
      </n-gi>
      <n-gi :span="12">
        <SFormInput name="engName" label="英文名字" v-model:value="formValue.engName" @load-rules="loadRules"/>
      </n-gi>
      <n-gi :span="12">
        <SFormSelect name="type" :data="types"  label="歌手类型" required v-model:value="formValue.type" @load-rules="loadRules"/>
      </n-gi>
      <n-gi :span="12">
        <SFormSelect name="area" :data="areas" label="地区" required v-model:value="formValue.area" @load-rules="loadRules"/>
      </n-gi>

<!--      <n-gi :span="24">-->
<!--        <SFormUpload name="picFileId" :data="{folderName:'pic'}" @finish="onFinish" label="上传图片" required v-model:value="formValue.picFileId" @load-rules="loadRules"/>-->
<!--      </n-gi>-->

      <n-gi :span="24">
        <SFormInput name="intro" type="textarea" label="简介" required v-model:value="formValue.intro" @load-rules="loadRules"/>
      </n-gi>
    </SForm>
  </SModal>
</template>
<script setup>
import SFormInput from "@/components/public/extForm/SFormInput.vue";
import SForm from "@/components/public/extForm/SForm.vue";
import SFormSelect from "@/components/public/extForm/SFormSelect.vue";
import SFormUpload from "@/components/public/extForm/SFormUpload.vue";
import {getSingerById, updateSinger} from "@/api/music/singerApi";
import SModal from "@/components/public/SModal/SModal.vue";
import useSModal from "@/components/public/SModal/useSModal";
import {getDictSelectByTypeCode} from "@/api/system/dictApi";

const api = {
  editApi:updateSinger,
  getInfoById:getSingerById
}
const formDefValue = {

}
const {
  onEdit,
  loadRules,
  modalShow,
  modalLoading,
  modalTitle,onSubmit,
  formValue,
  formRef,
} = useSModal("歌手",formDefValue,api);

defineExpose({
  onEdit,
  modalLoading
})

const types = ref([
  {
    value:1,
    label:'男'
  },
  {
    value:2,
    label:'女'
  },
  {
    value:3,
    label:'组合'
  },
])
const areas = ref([
  {
    value:1,
    label:'国内'
  },
  {
    value:2,
    label:'港台'
  },
  {
    value:3,
    label:'欧美'
  },
])
onMounted(()=>{

})
watch(()=>modalShow.value,(value)=>{
  if (value){
    getDictSelectByTypeCode("singer.type").then(res=>{
      types.value = res.data || []
    })
    getDictSelectByTypeCode("singer.area").then(res=>{
      areas.value = res.data || []
    })
  }
})
</script>